<template>
  <div class="register">
    <div class="regbox">
      <div class="reg-title">
        <h2>商标使用许可备案</h2>
      </div>
      <div class="reg-form">
        <el-form
          :model="data"
          :rules="rules"
          ref="data"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="许可人名称（中文）：">
            <el-input v-model="data.licensors_ch" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="被许可人名称（中文）：">
            <el-input v-model="data.licensees_ch" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="商标申请号/注册号：" prop="app_code">
            <el-input v-model="data.app_code" placeholder="商标注册号"></el-input>
          </el-form-item>

          <el-form-item label="是否共有商标：" prop="comm_status">
            <el-radio-group v-model="data.comm_status">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="再许可：" prop="sublicense_status">
            <el-checkbox v-model="data.sublicense_status">是</el-checkbox>
          </el-form-item>

          <el-form-item label="许可人原备案号：" prop="code_licensors">
            <el-input v-model="data.code_licensors" placeholder="许可人原备案号"></el-input>
          </el-form-item>

          <el-form-item label="许可期限：" prop="period_license">
            <el-input v-model="data.period_license" placeholder="许可期限"></el-input>
          </el-form-item>

          <el-form-item label="许可商品/服务项目(分类填写)：" prop="goods_permit">
            <el-button type="danger">选择分类+</el-button>
          </el-form-item>

          <el-form-item label="商品/服务项目：" prop="goods" class="text-fu">
            <el-input
              type="textarea"
              v-model="data.goods"
              :autosize="{ minRows: 5}"
              :disabled="true"
            ></el-input>
            <div class="text-zi">
              <p>请选择商品服务分类，如果不同的图样请重新提交申请书</p>
              <el-button type="danger" plain size="mini">点击查看服务分类详情</el-button>
            </div>
          </el-form-item>

          <div class="base-fu">
            <base-upload @getFile="getFile"></base-upload>
            <div class="base-zi">
              <p>确认书是在纸质提交的必须提交文件，请下载</p>
              <el-button type="danger" plain size="mini">下载确认书</el-button>
            </div>
          </div>
        </el-form>
      </div>
      <div class="r-f-sutbox">
        <button class="r-f-sut" @click="upimg">提交</button>
      </div>
    </div>
   
  </div>
</template>

<script>
import BaseUpload from "@/components/base-component/BaseUpload";
export default {
  name: "form-permission",
  components: {
    BaseUpload
  },
  data() {
    return {
      data: {
          licensors_ch:"11",
          licensees_ch:"22",
          app_code:"",
          comm_status:"是",
          sublicense_status:"是",
          code_licensors:"",
          period_license:"",
          goods_permit:"",
          goods:"",
          docImgs:[],
          confirm_upload:[]
      },
      formData: new FormData(),
      rules: {
        app_code: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        code_licensors: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        period_license: [{ required: true, message: "字段不能为空", trigger: "blur" }],
       
      },
    };
  },
   methods: {
    // 获取数据
    getFile(data, data2) {
      console.log(data);
      console.log(data2);
      this.data.docImgs = data;
      this.data.confirm_upload =data2;
    },

    subForm() {
      console.log(this.ruleForm);
    },
       // 图片上传
    upimg() {

      for (let i = 0; i < this.data.docImgs.length; i++) {
        this.formData.append("docImgs", this.data.docImgs[i]);
      }
      for (let j = 0; j < this.data.confirm_upload.length; j++) {
         this.formData.append("confirm_upload", this.data.confirm_upload[j]);
      }

      this.formData.append("licensors_ch", this.data.licensors_ch);
      this.formData.append("licensees_ch", this.data.licensees_ch);
      this.formData.append("app_code", this.data.app_code);
      this.formData.append("comm_status", this.data.comm_status);
      this.formData.append("sublicense_status", this.data.sublicense_status);
      this.formData.append("code_licensors", this.data.code_licensors);
      this.formData.append("period_license", this.data.period_license);
      this.formData.append("goods_permit", this.data.goods_permit);
      this.formData.append("goods", this.data.goods);

      //配置请求头
      var config = {
        header: {
          "Content-Type": "multipart/form-data"
        }
      };
      // axios向后端发送数据
      this.$http
        .post(
          "http://192.168.0.102:8080/proTWithdraw/update",
          this.formData,
          config
        )
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
    
  },
};
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
i,
em {
  font-style: normal;
}
.register {
  width: 100%;
  background-color: #e7e8eb;
  .regbox {
    width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    .reg-title {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e7e8eb;
      h2 {
        font-size: 22px;
        font-weight: 300;
      }
    }
    .reg-form {
      width: 700px;
      margin-left: 120px;
      .el-form-item {
        margin-top: 50px;
      }
    }
    .r-f-sutbox {
      margin-top: 50px;
      text-align: center;
      .r-f-sut {
        padding: 12px 20px;
        color: #fff;
        border: none;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: #67c23a;
      }
    }
  }
  .text-fu {
    position: relative;
    .text-zi {
      position: absolute;
      right: -320px;
      top: 0;

      p {
        font-size: 12px;
      }
    }
  }
  .base-fu {
    position: relative;
    .base-zi {
      position: absolute;
      right: -260px;
      top: 50px;

      p {
        font-size: 12px;
        line-height: 40px;
      }
    }
  }
}
</style>
